import React from "react"
import { Tabs } from "antd"
import { useNavigate, useLocation } from "react-router-dom"

const MyTabs = () => {
    const navigate = useNavigate();
    const location = useLocation();
    //设置一个对象，来表明在某个路径下面应该渲染的文字;
    const pathMap: any = {
        "/home": "首页",
        "/home/dashboard": "面板",
        "/home/users/list": "用户列表",
        "/home/settings": "设置",
        "/home/morelist": "更多列表",
        "/home/treelist": "树状列表"
    }
    //先获取一下当前的路径
    const currentPath = location.pathname;
    const currentLabel = pathMap[currentPath] || "首页";
    const isHome = currentPath === "/home";

    //生成标签项的数据;
    const items: any[] = [
        {
            key: '/home',
            label: "首页",
            closeable: false,
        },
        ...(isHome ? [] : [
            {
                key: currentPath,
                label: currentLabel,
                closeable: true,
            }
        ])
    ]
    const handleChange = (key) => {
        navigate(key);
    }
    const handleclosed = (key) => {
        if (key !== 'home') {
            navigate('/home');
        }
    }
    return (
        <Tabs
            items={items}
            activeKey={isHome ? 'home' : currentPath}
            type="editable-card"
            size="small"
            onChange={handleChange}
            onEdit={(key, action) => {
                if (action === 'remove') {
                    handleclosed(key)
                }
            }}
        />
    )
}

export default MyTabs;
